<template>
  <div class="demo">
    <div class="demo-title">无效或只读</div>
    <div class="demo-content">
      <div style="margin-bottom: 10px">
        <Mentions v-model:value="value1" placeholder="this is disabled Mentions" disabled>
          <Mentions.Option v-for="value in options" :key="value" :value="value">
            {{ value }}
          </Mentions.Option>
        </Mentions>
      </div>
      <Mentions v-model:value="value2" placeholder="this is readOnly a-mentions" readonly>
        <Mentions.Option v-for="value in options" :key="value" :value="value">
          {{ value }}
        </Mentions.Option>
      </Mentions>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Mentions from '@sscd/mentions';
  const value1 = ref<string>('');
  const value2 = ref<string>('');
  const options = ref<string[]>(['afc163', 'zombieJ', 'yesmeck']);
</script>

<style lang="less" scoped></style>
